<template id='homeImport'>
    <div class="homeImport">
        <div class="pc disCenter">
            <transition :name="options.cardTransition">
                <div class="content" @click.stop v-show="options.isShow">
                    <p class="contentTitle">Import Highlights from Your e-Readers</p>
                    <p class="contentDesc">Choose the device you wish to import highlights from and upload requested
                        file.</p>
                    <div class="select aCenter">
                        <img :src="amazonImage" />
                        <div class="info">
                            <p class="infoTitle">Import from Kindle e-readers</p>
                            <p class="infoDesc1">Upload <span>clippings.txt</span> from your Amazon Kindle e-reader.</p>
                            <p class="infoDesc2">File is located at the root folder of your Kindle drive.</p>
                        </div>
                        <div class="btn upload">
                            Select File
                            <input type="file" multiple="multiplt" title="" @change="uploadFiles($event,'txt')"
                                accept=".txt" ref="txt" />
                        </div>
                    </div>
                    <div class="select aCenter">
                        <img :src="koboImage" />
                        <div class="info">
                            <p class="infoTitle">Import from Kobo e-readers</p>
                            <p class="infoDesc1">Upload <span>Kobo.sqlite</span> from your Kobo e-reader.</p>
                            <p class="infoDesc2">File is located at the .kobo folder of your Kobo drive.</p>
                        </div>
                        <div class="btn upload">
                            Select File
                            <input type="file" title="" @change="uploadFiles($event,'sql')" accept=".sqlite"
                                ref="sql" />
                        </div>
                    </div>
                    <div class="tips">
                        <p>Import and manage your highlights from kindle or kobo e-readers with Enchi.io.</p>
                        <p>Imported highlights will automatically be added as entries under “Book” section in your enchi
                            database.</p>
                        <p>Duplicate entires will be skipped during import.</p>
                        <p>Enchi.io will only access your highlights data for importation, uploaded files will be
                            instantly removed when done.</p>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { showMessage } from "@/utils";
import { createNamespacedHelpers } from "vuex";
const common = createNamespacedHelpers("common");
export default {
    name: 'homeImport',
    components: {
    },
    props: {
        options: {
            type: Object,
        },
    },
    // 定义属性
    data() {
        return {
            amazonImage: require('@/assets/images/home/pc/amazon.png'),
            koboImage: require('@/assets/images/home/pc/kobo.png'),
        }
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
        ...common.mapState(['userInfo']),
    },
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        uploadFiles(e, type) {
            let files = e.target.files
            let temp = {
                name: type,
                files: files,
            };
            this.$emit('uploadFiles', temp);

            // console.log(this.$refs.txt.value);
            // this.$refs.txt.value = "";
        },
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() { }, // 生命周期 - 销毁之前
    destroyed() { }, // 生命周期 - 销毁完成
    activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
.homeImport {
    user-select: none;

    .pc {
        .content {
            width: 869px;
            height: 600px;
            background-color: #ffffff;
            box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
                0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
            border-radius: 12px;
            border: solid 1px #888888;
            padding: 30px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;

            .contentTitle {
                margin-top: 10px;
                color: @tColor;
                font-size: 24px;
            }

            .contentDesc {
                color: @dColor;
                font-size: 20px;
                margin-top: 30px;
            }

            .select {
                margin-top: 60px;

                .info {
                    width: 298px;
                    margin: 10px 70px 0 40px;

                    .infoTitle {
                        color: @tColor;
                        font-size: 20px;
                    }

                    .infoDesc1,
                    .infoDesc2 {
                        font-size: 14px;
                        color: @dColor;
                        line-height: 1.2;

                        span {
                            color: @tColor;
                        }
                    }

                    .infoDesc2 {
                        margin-top: 10px;
                    }
                }

                .upload {
                    position: relative;
                    cursor: pointer;

                    input {
                        cursor: pointer;
                        font-size: 0;
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        opacity: 0;
                    }
                }
            }

            .tips {
                margin-top: 60px;

                p {
                    font-size: 12px;
                    color: @dColor;
                    margin-top: 5px;
                }
            }
        }
    }
}

@media screen and (max-width: 980px) {
    .homeImport {
        .pc {
            .content {
                width: auto;
            }
        }

    }
}

// @media screen and (max-width: 780px) {
//     .homeImport {
//         display: none;
//     }
// }
</style>